<template>
  <!-- 设置审核人-->
  <a-modal :width="700" v-model:visible="showChooseCopyUser" title="设置审核人" title-align="start" :mask-closable="false" @cancel="closedDialog" :on-before-ok="submitData">
    <div class="dialog-con">
      <div>
        <a-checkbox value="1" v-model="editInfo.auditorEnable">指定成员</a-checkbox>
        <div class="choose-list">
          <a-button type="text" @click="openChooseUsers('auditors')">+添加成员</a-button>
          <div>
            <a-tag color="#165dff" style="margin: 0px 10px 10px 0" v-for="(item, i) in editInfo.auditors" :key="item.userId" closable @close="editInfo.auditors.splice(i, 1)">{{ item.userName }}</a-tag>
          </div>
        </div>
      </div>
      <div style="margin-top: 10px">
        <a-checkbox value="2" v-model="editInfo.auditRoleEnable">指定角色</a-checkbox>
        <div class="choose-list">
          <a-button type="text" @click="showChooseRoles = true">+添加角色</a-button>
          <div>
            <a-tag color="#165dff" style="margin: 0px 10px 10px 0" v-for="(item, i) in editInfo.auditRoles" :key="item.roleId" closable @close="editInfo.auditRoles.splice(i, 1)">{{ item.roleName }}</a-tag>
          </div>
        </div>
      </div>
      <div style="margin-top: 10px">
        <a-checkbox value="3" v-model="editInfo.auditDeptTypeEnable">指定发起人主管</a-checkbox>
        <div class="choose-list">
          <a-checkbox-group class="checkbox-managers" v-model="editInfo.auditDeptTypes">
            <a-checkbox style="margin-bottom: 10px; width: 160px" v-for="(val, key) in deptList" :key="key" :value="key">{{ val }}</a-checkbox>
          </a-checkbox-group>
        </div>
      </div>
      <div v-if="isWarehouse" style="margin-top: 20px">
        <a-checkbox class="title" v-model="editInfo.appointWarehouseManager">指定仓库管理员</a-checkbox>
      </div>
      <div style="margin-top: 20px">
        <h3 class="title">多人审批方式</h3>
        <a-radio-group direction="vertical" v-model="editInfo.auditType">
          <div>
            <a-radio value="ROUND">依次审批</a-radio>
          </div>
          <div class="flex-c">
            <a-radio value="COUNTERSIGN">会签</a-radio>
            <p style="color: #999">（须所有审批人同意或拒绝即可）</p>
          </div>
          <div class="flex-c">
            <a-radio value="OR_SIGN">或签</a-radio>
            <p style="color: #999">（只须其中一个审批人同意或拒绝即可）</p>
          </div>
        </a-radio-group>
      </div>
      <div style="margin-top: 10px">
        <h3 class="title">审批人为空</h3>
        <a-radio-group direction="vertical" v-model="editInfo.noFindAuditorDealType">
          <div>
            <a-radio value="AUTO_PASS">自动通过</a-radio>
          </div>
          <div>
            <div class="flex-c">
              <a-radio value="APPOINT_USER">指定成员</a-radio>
              <a-button type="text" style="margin-left: 20px" @click="openChooseUsers('appointAuditors')">+添加成员</a-button>
            </div>
            <a-space style="margin-left: 28px">
              <a-tag color="#165dff" v-for="(item, i) in editInfo.appointAuditors" :key="item.userId" closable @close="editInfo.appointAuditors.splice(i, 1)">{{ item.userName }}</a-tag>
            </a-space>
          </div>
        </a-radio-group>
      </div>
    </div>
  </a-modal>
  <!-- 选择角色 -->
  <ChooseRoles v-if="showChooseRoles" :isShow="showChooseRoles" @closed="showChooseRoles = false" @success="chooseRolesList" />
  <!-- 选择用户 -->
  <ChooseUsers v-if="showChooseUsers" :isShow="showChooseUsers" @closed="showChooseUsers = false" @success="chooseUserList" />
</template>
<script lang="ts" setup>
  import { ref, onMounted } from 'vue'
  import ChooseUsers from './chooseUsers.vue'
  import ChooseRoles from './chooseRoles.vue'
  import { DeptType } from '@/views/workFlow/types'
  import { Message } from '@arco-design/web-vue'

  onMounted(setDefaultData)

  const emit = defineEmits(['closed', 'success'])
  const props = defineProps({
    isShow: {
      type: Boolean,
      default: false,
    },
    auditInfo: {
      type: Object,
      default: () => {},
    },
    approvalType: {
      type: String,
    },
  })

  const showChooseCopyUser = ref(props.isShow)
  const showChooseRoles = ref(false)
  const showChooseUsers = ref(false)
  const deptList = DeptType
  const editInfo = ref<any>({})
  const chooseUsersType = ref('auditors')
  const isWarehouse = ['OTHER_IN_ORDER_APPROVAL', 'OTHER_OUT_ORDER_APPROVAL', 'TRANSFER_ORDER_APPROVAL'].includes(props.approvalType)
  function setDefaultData() {
    let copyInfo = props.auditInfo || {}
    editInfo.value = {
      auditorEnable: copyInfo.auditorEnable || false,
      auditRoleEnable: copyInfo.auditRoleEnable || false,
      auditDeptTypeEnable: copyInfo.auditDeptTypeEnable || false,
      auditType: copyInfo.auditType || 'ROUND',
      auditRoles: copyInfo.auditRoles || [],
      auditors: copyInfo.auditors || [],
      auditDeptTypes: copyInfo.auditDeptTypes || [],
      appointAuditors: copyInfo.appointAuditors || [],
      noFindAuditorDealType: copyInfo.noFindAuditorDealType || 'AUTO_PASS',
    }
    if (isWarehouse) {
      editInfo.value.appointWarehouseManager = copyInfo.appointWarehouseManager || false
    }
  }

  // 确认
  async function submitData() {
    let auditDeptTypes: Array<any> = []
    Object.keys(deptList).forEach((key: string) => {
      if (editInfo.value.auditDeptTypes?.includes(key)) {
        auditDeptTypes.push(key)
      }
    })
    editInfo.value.auditDeptTypes = auditDeptTypes
    if (editInfo.value.noFindAuditorDealType == 'APPOINT_USER' && !editInfo.value.appointAuditors?.length) {
      Message.error('请添加审核人为空时指定的审核成员')
      return false
    }
    emit('success', editInfo.value)
    closedDialog()
    return true
  }
  // 选择角色
  function chooseRolesList(list: Array<any>) {
    list.forEach((item: any) => {
      if (!editInfo.value.auditRoles.find((el: any) => el.roleId == item.roleId)) {
        editInfo.value.auditRoles.push(item)
      }
    })
  }
  // 打开选择成员
  function openChooseUsers(type: string) {
    chooseUsersType.value = type
    showChooseUsers.value = true
  }
  // 选择成员
  function chooseUserList(list: Array<any>) {
    if (chooseUsersType.value == 'auditors') {
      list.forEach((item: any) => {
        if (!editInfo.value.auditors.find((el: any) => el.userId == item.userId)) {
          editInfo.value.auditors.push(item)
        }
      })
    } else {
      list.forEach((item: any) => {
        if (!editInfo.value.appointAuditors.find((el: any) => el.userId == item.userId)) {
          editInfo.value.appointAuditors.push(item)
        }
      })
    }
  }

  // 关闭
  function closedDialog() {
    showChooseCopyUser.value = false
    emit('closed')
  }
</script>
<style lang="less" scoped>
  .dialog-con {
    height: calc(84vh - 160px);
  }
  :deep(.arco-checkbox-label) {
    font-weight: bold;
  }
  :deep(.checkbox-managers .arco-checkbox-label) {
    font-weight: normal;
  }
  .choose-list {
    background-color: #f5f5f5;
    padding: 5px 10px 10px;
  }
  .title {
    font-weight: bold;
  }
</style>
